<template>
  <div class="videoInfo" ref="videoPlayerRef" id="videoPlayerRef"></div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick, onMounted } from 'vue';
  import Player from 'xgplayer';
  import 'xgplayer/dist/index.min.css';

  defineOptions({ name: 'VideoInfo' });

  const videoPlayerRef = ref(null);
  const state = reactive({
    player: null,
  });

  const initPlayer = () => {
    let player = new Player({
      id: 'videoPlayerRef',
      width: videoPlayerRef.value.offsetWidth,
      height: videoPlayerRef.value.offsetHeight,
      autoplay: true,
      loop: true,
      fitVideoSize: 'auto',
      videoFillMode: 'auto',
      url: 'http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
    });
    state.player = player;
  }

  onMounted(async() => {
    await nextTick();
    await initPlayer();
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .videoInfo {
    width: 100%;
    height: 100%;
  }
</style>
